<template>
  <div class="apply-box" v-if="infoDetails">
    <div class="steps-box mt10">
      <div class="bottom-line steps-div">
        <Steps :active="infoDetails.actionStatus - 1">
          <Step>待财务顾问服务</Step>
          <Step>待定制</Step>
          <Step>服务中</Step>
          <Step>已完成</Step>
        </Steps>
      </div>
      <div class="bottom-line serve-box">
        <div>服务单号：{{ infoDetails.serveOrderId }}</div>
        <div>服务申请时间：{{ infoDetails.applyTime }}</div>
      </div>
      <div>
        <!-- <div>融资顾问：{{name}}</div>
              <div> > </div> -->
        <Cell is-link @click="$router.push('/customer')" class="cell-box"
          >融资顾问：{{ infoDetails.custServName ? infoDetails.custServName : "无" }}</Cell
        >
      </div>
    </div>
    <div class="assessment-box mt10">
      <div class="assessment-div">
        <div class="assessment-title">
          <div class="title-info">{{infoDetails.companyName}}</div>
          <div>申请融资额度：{{infoDetails.financingAmount ? infoDetails.financingAmount : 0}}万元</div>
        </div>
        <button @click="$router.push('/bgDetails/' + infoDetails.companyId)">企业信息</button>
      </div>
      <div>
        <Cell is-link @click="$router.push('/report/' + infoDetails.estimate.uuid)" class="cell-box"
          >查看评估报告
          <template slot="title">
            <span style="width: 228px; display:block; font-size:12px; line-height:14px;" class="custom-text">
              <span>评估单号：</span>
              <span v-show="infoDetails.estimate.uuid">{{ infoDetails.estimate.uuid ? infoDetails.estimate.uuid : '' }}</span>
            </span>
          </template>
        </Cell>
      </div>
    </div>
    <div class="mt10">
      <Tabs v-model="tabsactive" class="tabs-box" >
        <Tab title="标签 1" class="title-box">
            <template #title>融资申请 <div class="">{{infoDetails.estimate.status}}</div> </template>
            <div style="margin-top:15px; padding: 0 15px">
              <Application :infoDetails="infoDetails" />
            </div>
        </Tab>
        <Tab title="标签 2">
            <template #title>融资产品定制 <div>{{infoDetails.product.status}}</div> </template>
            <div v-if="infoDetails.product.longTermProducts.length || infoDetails.product.middleTermProducts.length || infoDetails.product.shortTermProducts.length" style="margin-top: 15px; padding: 0px 15px;">
              <Application2 :infoDetails="infoDetails" />
            </div>
            <div v-else style="text-align:center; padding: 20px; color:#ccc">暂无定制产品!</div>
        </Tab>
        <Tab title="标签 3">
            <template #title>企业资料 <div>{{infoDetails.enterprise.status}}</div> </template>
            <div style="margin-top: 15px;">
              <Companyinfo :infoDetails="infoDetails"/>
            </div>
        </Tab>
        <Tab title="标签 4">
            <template #title>付款信息 <div class="four-div">{{infoDetails.pay.status}}</div> </template>
            <div style="margin-top:15px"  v-if="infoDetails.pay.list.length">
              <div class="innerBox">
                <ul>
                  <li v-for="(item, index) in infoDetails.pay.list" :key="index">
                    <div class="title">{{item.planName}}</div>
                    <div class="information-item-box" v-for="(itemInfo, i) in item.orders" :key="i">
                      <div class="information-item">
                        <span v-if="itemInfo.expenseType == 1">前置费用</span>
                        <span v-else-if="itemInfo.expenseType == 2">咨询服务费</span>
                        <span style="color: #CCCCCC;" v-if="itemInfo.flow == 1">待支付</span>
                        <span style="color: #CCCCCC;" v-if="itemInfo.flow == 2">支付中</span>
                        <span style="color: #CCCCCC;" v-if="itemInfo.flow == 3">已付款</span>
                        <span style="color: #CCCCCC;" v-if="itemInfo.flow == 4">确认收款</span>
                      </div>
                      <div class="information-footer">
                        <div class="information-item">
                          <span>融资总额：{{itemInfo.amount}} 元</span>
                        </div>
                        <div class="information-item" v-if="itemInfo.rate">
                          <span>服务费率：{{itemInfo.rate}} %</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div v-else style="text-align:center; padding: 20px; color:#ccc">暂无付款信息!</div>
        </Tab>
      </Tabs>
    </div>
    <!-- 底部 -->
    <div class="bottom-box" @click="downloadFile(infoDetails.estimate.docUrl)">
        <!-- <div>融资服务完成-成功签约</div> -->
        <button> <img src="../../assets/image/download.png" alt=""> 下载正式融资建议书</button>
    </div>
  </div>
</template>

<script>
import { Step, Steps, Popup, Cell,Tab,Tabs } from "vant";
import { downLoad } from "api/Home"
import { listSelfFinancingDetail } from "api/AsessmentApply"
import Application from './components/application.vue'
import Application2 from './components/application2.vue'
import Companyinfo from './components/companyInfo.vue'
import baseUrl from 'utils/imgBaseUrl'
import dateFormat from "utils/dateFormat"
export default {
  components: {
    Step,
    Steps,
    Popup,
    Cell,
    Tab,
    Tabs,
    Application,
    Application2,
    Companyinfo
  },
  data() {
    return {
      infoDetails: null,
      active: 1,
      tabsactive: 0,
      serve: {
        code: "0987097979sd9",
        time: "2020-01-15  15:30",
      },
      name: "丁原",
      code: "233",
      index:'111'
    };
  },
  mounted() {
    listSelfFinancingDetail({financingPlanCode: this.$route.params.code}).then(({ code, data, message }) => {
      if (!code) {
        data.applyTime = dateFormat(new Date(data.applyTime), "yyyy-MM-dd HH:mm:ss")
        this.infoDetails = data;
      } else {
        this.$toast(message);
      }
    })
  },
  methods: {
    downloadFile(doc) {
      window.location.href = "/api" + doc;
    }
  },
};
</script>

<style lang="stylus" scoped>
@import "./../../assets/styl/mixin.styl"

.apply-box
    background $backColor
    overflow hidden
    .mt10
        margin-top rem($m10)
    .steps-box
        // height rem(182)
        width 100%
        background $infoColor
        .steps-div
            height rem(52)
            padding 0 rem(10)
        .bottom-line
            border-bottom rem(1) solid #EEEEEE
    .serve-box
        display flex
        justify-content center
        flex-direction column
        padding 0 rem(20) rem(20)
        div
            margin-top rem(10)
            color #999999
            font-size rem(12)
    .cell-box
        color #333333
        font-size rem($ft15)
        font-weight 400
    .assessment-box
        background $infoColor
        height rem(130.5)
        width rem(375)
        .assessment-div
            padding rem(20) rem(15)
            display flex
            justify-content space-between
            align-items center
            .assessment-title
                font-size rem($ft15)
                color $titleColor
                font-weight 400
                font-family PingFangSC-Regular,PingFang SC
                .title-info
                    margin-bottom rem(15)
                    font-weight bold
                    font-family PingFangSC-Medium,PingFang SC
            button
                border rem(1) solid $baseColor
                border-radius rem(11.5)
                height rem(23)
                width rem(90)
                font-size rem(13)
                color $baseColor
    .tabs-box
        padding-top rem(10)
        background $infoColor
    .bottom-box
        display flex
        flex-direction column
        justify-content center
        align-items center
        font-size rem($ft16)
        div
            color #52C41A
            margin-top rem(40)
        button 
            margin-top rem(25)
            margin-bottom rem(27)
            width rem(345)
            height rem(49)
            border-radius rem(5)
            background $baseColor
            color $infoColor
.innerBox
  ul
    li
      line-height rem(20)
      .title
        margin-left rem(20)
        font-size rem(16)
        position relative
        padding-left rem(10)
        font-weight bold
        margin-bottom rem(10)
        &::after
          content ''
          width rem(4)
          height rem(16)
          position absolute
          top 0
          left 0
          background-color $baseColor
      .information-item-box
        padding 0 rem(20)
        padding-bottom rem(10)
        margin-bottom rem(10)
        border-bottom rem(10) solid #eee
        &:last-child
          border 0
        .information-item
          display flex
          justify-content space-between
>>> .van-tabs--line 
  >>> .van-tabs__wrap
    height rem(50) !important
    border rem(1) solid $infoColor
>>> .van-tabs__content
    // padding rem(25) rem(15)
 >>> .tabs-box 
  >>> .swiper-container
    // width rem(307)
>>> .van-step__title--active
    color $titleColor !important
>>> .van-tab__text
    color #999999
    div
      font-size rem(12)
      margin-top rem(5)
      text-align  center
    .four-div
      color #999
>>> .van-tab--active 
    .four-div 
      color #999
  >>> .van-tab__text
      color #333333 !important
      font-weight bold !important
      div
        color #999999
        font-weight normal !important
    .four-div
      color #FF4D4F
>>> .van-tabs__line
    background-color #2F54EB
</style>
